<template>
	<div class="page" v-loading="loading" element-loading-text="正在获取所有设备,请稍等..."
		element-loading-spinner="el-icon-loading">
		<!-- <div class="top">
			<div style="float: left">
				<span @click="goBack" class="goback">摄像头管理</span>　|　<span>添加新摄像头</span>
			</div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<el-form :model="form" block id="addform">
			<el-form-item label="所属项目:" :label-width="formLabelWidth">
				<el-select v-model="form.product_id" placeholder="选择项目" class="inpu"
					@change="changePro(form.product_id)">
					<el-option v-for="item in products" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select><br>
				<!-- <el-cascader
					class="inpu"
					v-model="form.product_id"
					:options="products"
					:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}"
					@change="handleChange(form.product_id)">
				</el-cascader><br> -->
				<span class="tip">如果没有选择项，请先添加项目，否则设备无法添加！</span>
			</el-form-item>
			<el-form-item label="关联设备:" :label-width="formLabelWidth" style="margin-top: 0.4rem">
				<el-select v-model="form.equip_id" filterable placeholder="选择设备,默认全部" class="inpu" size="medium">
					<el-option v-for="item in devices" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select><br />
				<span>支持输入关键字模糊搜索,如“测试设备”。</span>
				<!-- <span v-if="showdevice" style="margin-left:0.4rem;">该项目暂无设备</span> -->
				<!-- <div class="tip">如果不选择，则默认应用于整个项目</div> -->
			</el-form-item>
			<el-form-item label="摄像头名称:" :label-width="formLabelWidth" style="margin-top: -0.1rem">
				<el-input v-model="form.camera_name"  class="inpu" placeholder="请输入摄像头名称,自定义"></el-input><br />
				<!-- <span class="tip">编码必须是英文字母，数字，下划线或者破折号的组合</span> -->
			</el-form-item>
			<el-form-item label="HLS地址:" :label-width="formLabelWidth" style="margin-top: 0.4rem">
				<el-input v-model="form.hls_addr" class="inpu" style="width:10rem" type="textarea" :autosize="{minRows:1.6,maxRows:5}" resize="both" placeholder="请输入HLS播放地址,主要用于手机端">
				</el-input>
			</el-form-item>
			<el-form-item label="FLV地址:" :label-width="formLabelWidth" style="margin-top: 0.4rem">
				<el-input v-model="form.rtmp_addr" class="inpu" style="width:10rem" type="textarea" :autosize="{minRows:1.6,maxRows:5}" resize="both" placeholder="请输入FLV播放地址,主要用于电脑端">
				</el-input>
			</el-form-item>
		</el-form>
		<div class="dialog-footer">
			<el-button type="success" size="small" @click="addGoods">保存</el-button>
			<el-button type="primary" size="small" @click="resetForm">重置</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "addCamera",
		data() {
			return {
				formLabelWidth: "2.8rem",
				form: {
					product_id:'',
					camera_name: "",
					equip_id: 0,
					hls_addr: "",
					rtmp_addr: "",
				},
				products: [],
				loading:false,
				devices: [{
					value: 0,
					label: "全部"
				}]
			};
		},
		created() {
			this.getProduct();
		},

		methods: {
			getProduct(){
				var that=this;
				this.$http({
					method: 'post',
					url: '/api/product/tree',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.products=res.data.data;
						this.form.product_id=res.data.data[0].value;
						this.getDevice(this.form.product_id);
					}
					//console.log("charu")
				}).catch(error => {
					
					console.log(error);
				});
			},
			
			handleChange(par){
			    this.getDevice(par);
			},

			resetForm() {
				for (var key in this.form) {
					this.form[key] = "";
				}
				this.form.product_id=this.products[0].value;
				this.form.equip_id = this.devices[0].value;
			},
			
			goBack() {
				this.$router.go(-1);
			},
			
			//获取所有设备函数
			getDevice(id) {
				var that = this;
				//console.log(id)
				this.loading = false;
				this.devices = [{
					value: 0,
					label: "全部",
				}];
				this.$http({
						method: "post",
						url: "api/equip/all",
						data: {
							'product_id': id
						}
					})
					.then((res) => {
						if (res && res.data.result == "success") {
							if (res.data.data.length) {
								for (var i = 0; i < res.data.data.length; i++) {
									var device = {
										value: res.data.data[i].id,
										label: res.data.data[i].equip_name,
									};
									this.devices.push(device);
								}
								this.form.equip_id = this.devices[0].value;
							}
							this.loading = false;
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			addGoods() {
				var that = this;
				this.$http({
						method: "post",
						url: "api/camera/add",
						data: this.form
					})
					.then((res) => {
						if (res && res.data.result == "success") {
							this.$message({
								message: "恭喜,添加摄像头成功!",
								type: "success",
								center: true,
							});
							this.$router.go(-1);
						}
					})
					.catch((error) => {
						console.log(error);
					});
			}
		},
	};
</script>

<style scoped>
	@media all and (max-width: 1600px) {
		.dialog-footer {
			transform: translateY(-0.4rem) !important;
		}
	}

	#addform {
		text-align: left;
		margin-top: 0.4rem;
	}

	.inpu {
		width: 5rem;
		font-size: 16px;
	}

	.inpu>>>.el-input__inner {
		padding: 0 4px;
	}

	.inpu>>>.el-textarea__inner {
		padding: 0 4px;
	}

	.tip {
		color: #ff5722;
		font-size: 0.25rem;
	}
</style>
